<template>
  <div class="account-security">
    <el-form
      :model="passwordInfo"
      label-width="80px"
      ref="passwordForm"
      :rules="rules"
      label-position="left"
    >
      <el-form-item label="新密码" prop="newpassword">
        <el-input type="password" v-model="passwordInfo.newpassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          type="password"
          v-model="passwordInfo.confirmPassword"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="email_code">
        <el-input
          style="width:100px;"
          v-model="passwordInfo.email_code"
        ></el-input>
        <SendEmailBtn :userInfo="userInfo" />
      </el-form-item>
      <el-form-item>
        <el-button class="CustomBtn" @click="updatePassword">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { isPassword } from '@/utils/validate'
import SendEmailBtn from '@/components/User/SendEmailBtn'
import { encryptData } from '@/utils/encrypt'
export default {
  name: 'ChangePassword',
  props: {},
  components: {
    SendEmailBtn
  },
  data() {
    let validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('至少包含字母、数字组成，5-13位'))
      } else {
        callback()
      }
    }
    const validateRealPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordInfo.newpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      passwordInfo: {
        newpassword: '',
        checkEmail: '',
        confirmPassword: ''
      },
      rules: {
        newpassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '重复密码不能为空', trigger: 'blur' },
          { validator: validateRealPassword, trigger: 'blur' }
        ]
      },
      originPassword: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 更新密码功能
    updatePassword() {
      // 更新密码的方法
      this.$refs.passwordForm.validate(async valid => {
        // 如果没有通过校验
        if (!valid) return this.$message.error('格式错误,请检查你的格式')
        // 密码字段拷贝
        this.originPassword = this.passwordInfo.newpassword
        // 密码字段加密
        this.passwordInfo.newpassword = encryptData(
          this.passwordInfo.newpassword
        )

        // 整理请求体
        let response = this.passwordInfo
        response.newpassword = this.passwordInfo.newpassword
        response = this.$qs.stringify(this.passwordInfo)
        // 还原密码字段
        this.passwordInfo.newpassword = this.originPassword
        const res = await this.$API.user.AlterPassword(response)
        if (res.status == 200) {
          this.$message.success('修改成功')
          // 退出登录
          this.$store.dispatch('user/LogOut')
          // 重置数据
          this.$refs.passwordForm.resetFields()
        } else {
          this.$message(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.account-security {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 16px;
}
</style>
